<template>
  <div class="box">
    <img class="img1" src="../assets/img/map.bab2b509.png" alt="" />
    <img class="img2" src="../assets/img/lbx.0dea0f97.png" alt="" />
    <img class="img3" src="../assets/img/jt.c268bab5.png" alt="" />
    <!-- 头部 -->
    <header>
      <h1>新型冠状肺炎实时监测</h1>
      <span>当前时间为&nbsp;:&nbsp;&nbsp;{{ item }}</span>
    </header>
    <!-- 头部 -->
    <nav>
      <div class="left">
        <!-- 第一个 -->
        <LEFT>
          <div slot="panelcontent">
            <h2>新增确诊TOP10</h2>
            <div class="chart left1"></div>
          </div>
        </LEFT>
        <!-- 第二个 -->

        <LEFT>
          <div slot="panelcontent">
            <h2>大洲感染总人数趋势图</h2>
            <div class="chart left2"></div>
          </div>
        </LEFT>
        <!-- 第三个 -->
        <LEFT>
          <div slot="panelcontent">
            <h2>大洲感染人数饼图</h2>
            <div class="chart left3"></div>
          </div>
        </LEFT>
      </div>
      <div class="zhon">
        <div class="header">
          <ul>
            <li>{{ globalStatis.confirm }}</li>

            <li>{{ globalStatis.dead }}</li>

            <li>{{ globalStatis.heal }}</li>

            <li>{{ globalStatis.nowConfirm }}</li>
          </ul>
          <ol>
            <li>累计确诊</li>
            <li>现存确诊</li>
            <li>累计治愈</li>
            <li>累计死亡</li>
          </ol>
        </div>
        <div class="foot">
          <div class="buy">
            <button @click="but" :class="{ active: act == 0, activ: act == 1 }">
              累计确诊
            </button>
            <button @click="but" :class="{ active: act == 1, activ: act == 0 }">
              现存确诊
            </button>
          </div>
          <div class="map" style="height: 600px"></div>
        </div>
      </div>
      <div class="right">
        <!-- 第一个 -->

        <LEFT>
          <div slot="panelcontent">
            <h2>主要疫情国家治愈率</h2>
            <div
              class="chart right1"
              style="height: 310px; margin-top: -30px"
            ></div>
          </div>
        </LEFT>
        <!-- 第二个 -->

        <LEFT>
          <div slot="panelcontent">
            <h2>世界每周新增治愈和死亡人数</h2>
            <div class="chart right2"></div>
          </div>
        </LEFT>
        <!-- 第二个 -->

        <LEFT>
          <div slot="panelcontent">
            <h2>境外输入病情top10省份</h2>
            <div class="chart right3"></div>
          </div>
        </LEFT>
      </div>
    </nav>
  </div>
</template>

<script>
import LEFT from '../components/leftOne'
import { login } from '../api/login.js'
import world from '../../node_modules/echarts/map/js/world.js'
import { log } from 'util'
export default {
  components: { LEFT },
  data() {
    return {
      item: '',
      act: 0,
      globalStatis: {},
      infor: {},
      oppp: [],
    }
  },
  mounted() {
    this.guonei()
    this.logint() //调用数据
    setInterval((res) => {
      this.getitem()
    }, 1000)
  },
  methods: {
    //时间格式
    getitem() {
      var myDate = new Date()
      myDate.getYear() // 获取当前年份(2位)
      myDate.getFullYear() // 获取完整的年份(4位,1970-????)
      myDate.getMonth() // 获取当前月份(0-11,0代表1月)
      myDate.getDate() // 获取当前日(1-31)
      myDate.getDay() // 获取当前星期X(0-6,0代表星期天)
      myDate.getTime() // 获取当前时间(从1970.1.1开始的毫秒数)
      myDate.getHours() // 获取当前小时数(0-23)
      myDate.getMinutes() // 获取当前分钟数(0-59)
      myDate.getSeconds() // 获取当前秒数(0-59)
      myDate.getMilliseconds() // 获取当前毫秒数(0-999)
      myDate.toLocaleDateString() // 获取当前日期
      var mytime = myDate.toLocaleTimeString() // 获取当前时间
      myDate.toLocaleString() // 获取日期与时间
      Date.prototype.Format = function (fmt) {
        // author: meizz
        var o = {
          'M+': this.getMonth() + 1, // 月份
          'd+': this.getDate(), // 日
          'h+': this.getHours(), // 小时
          'm+': this.getMinutes(), // 分
          's+': this.getSeconds(), // 秒
          'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
          S: this.getMilliseconds(), // 毫秒
        }
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + '').substr(4 - RegExp.$1.length),
          )
        for (var k in o)
          if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length),
            )
        return fmt
      }

      var time2 = new Date().Format('yyyy-MM-dd hh:mm:ss')
      this.item = time2
    },
    //统一初始化echarts方法
    addChart(dom, option) {
      let myChart = echarts.init(dom)
      myChart.setOption(option)
      //页面改变大小时,echarts也跟随改变
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      return myChart
    },
    logint() {
      var thit = this

      $.ajax({
        url: '/api?name=disease_foreign',
        type: 'get',
        dataType: 'json',
      })
        .done(function (data) {
          let list = JSON.parse(data.data)
          thit.globalStatis = list.globalStatis
          //左一
          const option1 = thit.left1(list.countryAddConfirmRankList)
          let domleft1 = document.querySelector('.left1')
          thit.addChart(domleft1, option1)
          //有一
          const option2 = thit.right1(list.foreignList.splice(0, 5))
          let domright2 = document.querySelector('.right1')
          thit.addChart(domright2, option2)
          // 左二
          const option3 = thit.left2(list.continentStatis)
          let domright3 = document.querySelector('.left2')
          thit.addChart(domright3, option3)
          //左三
          const option4 = thit.left3(list.continentStatis)
          let domright4 = document.querySelector('.left3')
          thit.addChart(domright4, option4)
          //右二
          const option5 = thit.right2(list.globalDailyHistory)
          let domright5 = document.querySelector('.right2')
          thit.addChart(domright5, option5)
          //右三
          const option6 = thit.right3(list.importStatis.TopList)
          let domright6 = document.querySelector('.right3')
          thit.addChart(domright6, option6)
          thit.oppp = list.foreignList
          const map1 = thit.maps(list.foreignList)
          let map2 = document.querySelector('.map')
          thit.addChart(map2, map1)
        })
        .fail(function () {
          alert('服务器超时，请重试！')
        })
      // （1）创建异步对象
      // var thit = this
      // var ajaxObj = new XMLHttpRequest()
      // // （2）设置请求的参数。包括：请求的方法、请求的url。
      // ajaxObj.open('get', '/api?name=disease_foreign')
      // // （3）发送请求
      // ajaxObj.send()
      // //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
      // //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
      // ajaxObj.onreadystatechange = function () {
      //   // 为了保证 数据 完整返回，我们一般会判断 两个值
      //   if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
      //     // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
      //     // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
      //     // 数据是保存在 异步对象的 属性中
      //     let foreinData
      //     foreinData = JSON.parse(ajaxObj.responseText)
      //     let list = JSON.parse(foreinData.data)
      //     thit.globalStatis = list.globalStatis
      //     //左一
      //     const option1 = thit.left1(list.countryAddConfirmRankList)
      //     let domleft1 = document.querySelector('.left1')
      //     thit.addChart(domleft1, option1)
      //     //有一
      //     const option2 = thit.right1(list.foreignList.splice(0, 5))
      //     let domright2 = document.querySelector('.right1')
      //     thit.addChart(domright2, option2)
      //     // 左二
      //     const option3 = thit.left2(list.continentStatis)
      //     let domright3 = document.querySelector('.left2')
      //     thit.addChart(domright3, option3)
      //     //左三
      //     const option4 = thit.left3(list.continentStatis)
      //     let domright4 = document.querySelector('.left3')
      //     thit.addChart(domright4, option4)
      //     //右二
      //     const option5 = thit.right2(list.globalDailyHistory)
      //     let domright5 = document.querySelector('.right2')
      //     thit.addChart(domright5, option5)
      //     //右三
      //     const option6 = thit.right3(list.importStatis.TopList)
      //     let domright6 = document.querySelector('.right3')
      //     thit.addChart(domright6, option6)
      //     thit.oppp = list.foreignList
      //     const map1 = thit.maps(list.foreignList)
      //     let map2 = document.querySelector('.map')
      //     thit.addChart(map2, map1)
      //   }
      // }
    },
    left1(option1) {
      let yAxis = []
      let xAxis = []
      for (let val of option1) {
        xAxis.push(val.nation)
        yAxis.push(val.addConfirm)
      }
      var option = {
        // backgroundColor: '#111c4e',
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            lineStyle: {
              opacity: 0,
            },
          },
        },
        legend: {
          data: ['直接访问', '背景'],
          show: false,
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '5%',
          top: '7%',
          height: '85%',
          containLabel: true,
          z: 22,
        },
        xAxis: [
          {
            type: 'category',
            gridIndex: 0,
            data: xAxis,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: '#0c3b71',
              },
            },
            axisLabel: {
              show: true,
              color: 'rgb(170,170,170)',
              fontSize: 12,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            gridIndex: 0,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#0c3b71',
              },
            },
            axisLabel: {
              color: 'rgb(170,170,170)',
              fontSize: 12,
            },
          },
          {
            type: 'value',
            gridIndex: 0,

            splitNumber: 10,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
              },
            },
          },
        ],
        series: [
          {
            type: 'bar',
            barWidth: '30%',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00feff',
                  },
                  {
                    offset: 0.5,
                    color: '#027eff',
                  },
                  {
                    offset: 1,
                    color: '#0286ff',
                  },
                ]),
              },
            },
            data: yAxis,
            zlevel: 11,
          },
          {
            type: 'bar',
            barWidth: '30%',
            xAxisIndex: 0,
            yAxisIndex: 1,
            barGap: '-135%',
            itemStyle: {
              normal: {
                color: 'rgba(255,255,255,0.1)',
              },
            },
            zlevel: 9,
          },
        ],
      }
      return option
    },
    right1(option2) {
      var titlename = []
      var data = []
      let arr = option2
      arr.forEach((item) => {
        titlename.push(item.name)

        let on1 = (item.heal / item.confirm).toFixed(2) * 100
        data.push(on1)
      })

      var valdata = []
      var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6']
      let option = {
        // backgroundColor: '#0e2147',
        xAxis: {
          show: false,
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '5%',
          top: '7%',
          height: '85%',
          containLabel: true,
          z: 22,
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: '#fff',
              formatter: function (value, index) {
                return ['{title|' + value + '} '].join('\n')
              },
              rich: {
                lg: {
                  backgroundColor: '#339911',
                  color: '#fff',
                  borderRadius: 5,
                  // padding: 5,
                  align: 'center',
                  width: 100,
                  height: 10,
                },
              },
            },
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: '#fff',
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: data,
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: '{c}%',
              },
            },
          },
          {
            name: '框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: 'none',
                borderColor: '#00c1de',
                borderWidth: 3,
                barBorderRadius: 15,
              },
            },
          },
        ],
      }

      return option
    },
    left2(option3) {
      let na = ['亚洲', '北美洲', '大洋洲', '欧洲', '其他']
      let color = ['#0066CC', '#FF6666', '#FFCCCC', '#CCFFCC', '#9933FF']
      //五大洲
      let num1 = []
      let num2 = []
      let num3 = []
      let num4 = []
      let num5 = []
      let xData = []
      //series添加的数据
      let one = []
      option3.forEach((item) => {
        xData.push(item.date)
        if (typeof item.statis.亚洲 == 'number') {
          num1.push(item.statis.亚洲)
        } else {
          num1.push(0)
        }
        if (typeof item.statis.北美洲 == 'number') {
          num2.push(item.statis.北美洲)
        } else {
          num2.push(0)
        }
        if (typeof item.statis.大洋洲 == 'number') {
          num3.push(item.statis.大洋洲)
        } else {
          num3.push(0)
        }
        if (typeof item.statis.欧洲 == 'number') {
          num4.push(item.statis.欧洲)
        } else {
          num4.push(0)
        }
        if (typeof item.statis.其他 == 'number') {
          num5.push(item.statis.其他)
        } else {
          num5.push(0)
        }
      })
      let num = [num1, num2, num3, num4, num5]
      for (let i = 0; i < 5; i++) {
        one.push({
          name: na[i],
          type: 'line',
          symbolSize: 10,
          symbol: 'circle',
          itemStyle: {
            color: color[i],
          },
          data: num[i],
        })
      }
      let option = {
        // backgroundColor: '#1A1835',

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff',
            },
          },
        },
        grid: {
          borderWidth: 0,
          left: '80',
          top: '40',
          right: '3%',
          bottom: '20',
          textStyle: {
            color: '#fff',
          },
        },
        legend: {
          x: '5',
          top: '0',
          textStyle: {
            color: '#90979c',
          },
          data: na,
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: 'rgba(204,187,225,0.5)',
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: xData,
          },
        ],

        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(204,187,225,0.5)',
              },
            },
          },
        ],
        series: one,
      }
      return option
    },
    left3(option4) {
      let num1 = 0 //亚洲
      let num2 = 0 //北美洲
      let num3 = 0 //大洋洲
      let num4 = 0 //欧洲
      let num5 = 0 //其他
      let num = [] //总数据
      //循环拿数据
      let name = ['北美洲', '欧洲']
      let Daa = []
      option4.forEach((item) => {
        if (typeof item.statis.亚洲 == 'number') {
          num1 += item.statis.亚洲
        }
        if (typeof item.statis.北美洲 == 'number') {
          num2 += item.statis.北美洲
        }
        if (typeof item.statis.大洋洲 == 'number') {
          num3 += item.statis.大洋洲
        }
        if (typeof item.statis.欧洲 == 'number') {
          num4 += item.statis.欧洲
        }
        if (typeof item.statis.其他 == 'number') {
          num5 += item.statis.其他
        }
      })
      let bei = num1 + num2 + num3 + num5
      num = [bei, num4]

      for (let i = 0; i < 5; i++) {
        Daa.push({
          value: num[i],
          name: name[i],
        })
      }
      let color = ['#1089e7', '#f57474']
      let option = {
        color: color,
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: 0,
          left: 0,
          width: 80,
          textStyle: {
            color: '#fff',
          },
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '5%',
          top: '20%',
          height: '85%',
          containLabel: true,
          z: 22,
        },
        series: [
          {
            name: '各州感染人数',
            type: 'pie',
            radius: ['30%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: Daa,
          },
        ],
      }
      return option
    },
    right2(option5) {
      let na = ['死亡人数', '治愈人数']
      let color = ['#0066CC', '#FF6666']
      //五大洲
      let num1 = []
      let num2 = []
      let xData = []
      //series添加的数据
      let one = []
      option5.forEach((item) => {
        xData.push(item.date)
        num1.push(item.all.heal) //治愈
        num2.push(item.all.dead) //死亡
      })
      let num = [num1, num2]
      for (let i = 0; i < 3; i++) {
        one.push({
          name: na[i],
          type: 'line',
          symbolSize: 10,
          symbol: 'circle',
          itemStyle: {
            color: color[i],
          },
          data: num[i],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(199, 237, 250,0.5)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(199, 237, 250,0.2)',
                  },
                ],
                false,
              ),
            },
          },
          showSymbol: false,
        })
      }
      let option = {
        // backgroundColor: '#1A1835',

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff',
            },
          },
        },
        grid: {
          borderWidth: 0,
          left: '80',
          top: '40',
          right: '3%',
          bottom: '20',
          textStyle: {
            color: '#fff',
          },
        },
        legend: {
          x: '5',
          top: '0',
          textStyle: {
            color: '#90979c',
          },
          data: na,
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: 'rgba(204,187,225,0.5)',
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: xData,
          },
        ],

        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(204,187,225,0.5)',
              },
            },
          },
        ],
        series: one,
      }
      return option
    },
    right3(option6) {
      let arr = []
      let arr2 = []
      option6.forEach((item) => {
        arr.push(item.province)
        arr2.push(item.importedCase)
      })
      let color = [
        '#006cff',
        '#60cda0',
        '#ed8884',
        '#ff9f7f',
        '#0096ff',
        '#9fe6b8',
        '#32c5e9',
        '#1d9dff',
        '#ff9f7f',
        '#0096ff',
      ]
      let option = {
        color: color,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        series: [
          {
            name: '地区分布',
            type: 'pie',
            radius: [5, 80],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5,
            },
            data: [
              { value: arr2[0], name: arr[0] },
              { value: arr2[1], name: arr[1] },
              { value: arr2[2], name: arr[2] },
              { value: arr2[3], name: arr[3] },
              { value: arr2[4], name: arr[4] },
              { value: arr2[5], name: arr[5] },
              { value: arr2[6], name: arr[6] },
              { value: arr2[7], name: arr[7] },
            ],
          },
        ],
      }
      return option
    },
    maps(option7) {
      let nameMap = {
        Afghanistan: '阿富汗',
        Singapore: '新加坡',
        Angola: '安哥拉',
        Albania: '阿尔巴尼亚',
        'United Arab Emirates': '阿联酋',
        Argentina: '阿根廷',
        Armenia: '亚美尼亚',
        'French Southern and Antarctic Lands': '法属南半球和南极领地',
        Australia: '澳大利亚',
        Austria: '奥地利',
        Azerbaijan: '阿塞拜疆',
        Burundi: '布隆迪',
        Belgium: '比利时',
        Benin: '贝宁',
        'Burkina Faso': '布基纳法索',
        Bangladesh: '孟加拉国',
        Bulgaria: '保加利亚',
        'The Bahamas': '巴哈马',
        'Bosnia and Herzegovina': '波斯尼亚和黑塞哥维那',
        Belarus: '白俄罗斯',
        Belize: '伯利兹',
        Bermuda: '百慕大',
        Bolivia: '玻利维亚',
        Brazil: '巴西',
        Brunei: '文莱',
        Bhutan: '不丹',
        Botswana: '博茨瓦纳',
        'Central African Republic': '中非共和国',
        Canada: '加拿大',
        Switzerland: '瑞士',
        Chile: '智利',
        China: '中国',
        'Ivory Coast': '象牙海岸',
        Cameroon: '喀麦隆',
        'Democratic Republic of the Congo': '刚果民主共和国',
        'Republic of the Congo': '刚果共和国',
        Colombia: '哥伦比亚',
        'Costa Rica': '哥斯达黎加',
        Cuba: '古巴',
        'Northern Cyprus': '北塞浦路斯',
        Cyprus: '塞浦路斯',
        'Czech Republic': '捷克共和国',
        Germany: '德国',
        Djibouti: '吉布提',
        Denmark: '丹麦',
        'Dominican Republic': '多明尼加共和国',
        Algeria: '阿尔及利亚',
        Ecuador: '厄瓜多尔',
        Egypt: '埃及',
        Eritrea: '厄立特里亚',
        Spain: '西班牙',
        Estonia: '爱沙尼亚',
        Ethiopia: '埃塞俄比亚',
        Finland: '芬兰',
        Fiji: '斐',
        'Falkland Islands': '福克兰群岛',
        France: '法国',
        Gabon: '加蓬',
        'United Kingdom': '英国',
        Georgia: '格鲁吉亚',
        Ghana: '加纳',
        Guinea: '几内亚',
        Gambia: '冈比亚',
        'Guinea Bissau': '几内亚比绍',
        Greece: '希腊',
        Greenland: '格陵兰',
        Guatemala: '危地马拉',
        'French Guiana': '法属圭亚那',
        Guyana: '圭亚那',
        Honduras: '洪都拉斯',
        Croatia: '克罗地亚',
        Haiti: '海地',
        Hungary: '匈牙利',
        Indonesia: '印度尼西亚',
        India: '印度',
        Ireland: '爱尔兰',
        Iran: '伊朗',
        Iraq: '伊拉克',
        Iceland: '冰岛',
        Israel: '以色列',
        Italy: '意大利',
        Jamaica: '牙买加',
        Jordan: '约旦',
        Japan: '日本',
        Kazakhstan: '哈萨克斯坦',
        Kenya: '肯尼亚',
        Kyrgyzstan: '吉尔吉斯斯坦',
        Cambodia: '柬埔寨',
        Kosovo: '科索沃',
        Kuwait: '科威特',
        Laos: '老挝',
        Lebanon: '黎巴嫩',
        Liberia: '利比里亚',
        Libya: '利比亚',
        'Sri Lanka': '斯里兰卡',
        Lesotho: '莱索托',
        Lithuania: '立陶宛',
        Luxembourg: '卢森堡',
        Latvia: '拉脱维亚',
        Morocco: '摩洛哥',
        Moldova: '摩尔多瓦',
        Madagascar: '马达加斯加',
        Mexico: '墨西哥',
        Macedonia: '马其顿',
        Mali: '马里',
        Myanmar: '缅甸',
        Montenegro: '黑山',
        Mongolia: '蒙古',
        Mozambique: '莫桑比克',
        Mauritania: '毛里塔尼亚',
        Malawi: '马拉维',
        Malaysia: '马来西亚',
        Namibia: '纳米比亚',
        'New Caledonia': '新喀里多尼亚',
        Niger: '尼日尔',
        Nigeria: '尼日利亚',
        Nicaragua: '尼加拉瓜',
        Netherlands: '荷兰',
        Norway: '挪威',
        Nepal: '尼泊尔',
        'New Zealand': '新西兰',
        Oman: '阿曼',
        Pakistan: '巴基斯坦',
        Panama: '巴拿马',
        Peru: '秘鲁',
        Philippines: '菲律宾',
        'Papua New Guinea': '巴布亚新几内亚',
        Poland: '波兰',
        'Puerto Rico': '波多黎各',
        'North Korea': '北朝鲜',
        Portugal: '葡萄牙',
        Paraguay: '巴拉圭',
        Qatar: '卡塔尔',
        Romania: '罗马尼亚',
        Russia: '俄罗斯',
        Rwanda: '卢旺达',
        'Western Sahara': '西撒哈拉',
        'Saudi Arabia': '沙特阿拉伯',
        Sudan: '苏丹',
        'South Sudan': '南苏丹',
        Senegal: '塞内加尔',
        'Solomon Islands': '所罗门群岛',
        'Sierra Leone': '塞拉利昂',
        'El Salvador': '萨尔瓦多',
        Somaliland: '索马里兰',
        Somalia: '索马里',
        'Republic of Serbia': '塞尔维亚',
        Suriname: '苏里南',
        Slovakia: '斯洛伐克',
        Slovenia: '斯洛文尼亚',
        Sweden: '瑞典',
        Swaziland: '斯威士兰',
        Syria: '叙利亚',
        Chad: '乍得',
        Togo: '多哥',
        Thailand: '泰国',
        Tajikistan: '塔吉克斯坦',
        Turkmenistan: '土库曼斯坦',
        'East Timor': '东帝汶',
        'Trinidad and Tobago': '特里尼达和多巴哥',
        Tunisia: '突尼斯',
        Turkey: '土耳其',
        'United Republic of Tanzania': '坦桑尼亚',
        Uganda: '乌干达',
        Ukraine: '乌克兰',
        Uruguay: '乌拉圭',
        'United States': '美国',
        Uzbekistan: '乌兹别克斯坦',
        Venezuela: '委内瑞拉',
        Vietnam: '越南',
        Vanuatu: '瓦努阿图',
        'West Bank': '西岸',
        Yemen: '也门',
        'South Africa': '南非',
        Zambia: '赞比亚',
        Korea: '韩国',
        Tanzania: '坦桑尼亚',
        Zimbabwe: '津巴布韦',
        Congo: '刚果',
        'Central African Rep.': '中非',
        Serbia: '塞尔维亚',
        'Bosnia and Herz.': '波黑',
        'Czech Rep.': '捷克',
        'W. Sahara': '西撒哈拉',
        'Lao PDR': '老挝',
        'Dem.Rep.Korea': '朝鲜',
        'Falkland Is.': '福克兰群岛',
        'Timor-Leste': '东帝汶',
        'Solomon Is.': '所罗门群岛',
        Palestine: '巴勒斯坦',
        'N. Cyprus': '北塞浦路斯',
        Aland: '奥兰群岛',
        'Fr. S. Antarctic Lands': '法属南半球和南极陆地',
        Mauritius: '毛里求斯',
        Comoros: '科摩罗',
        'Eq. Guinea': '赤道几内亚',
        'Guinea-Bissau': '几内亚比绍',
        'Dominican Rep.': '多米尼加',
        'Saint Lucia': '圣卢西亚',
        Dominica: '多米尼克',
        'Antigua and Barb.': '安提瓜和巴布达',
        'U.S. Virgin Is.': '美国原始岛屿',
        Montserrat: '蒙塞拉特',
        Grenada: '格林纳达',
        Barbados: '巴巴多斯',
        Samoa: '萨摩亚',
        Bahamas: '巴哈马',
        'Cayman Is.': '开曼群岛',
        'Faeroe Is.': '法罗群岛',
        'IsIe of Man': '马恩岛',
        Malta: '马耳他共和国',
        Jersey: '泽西',
        'Cape Verde': '佛得角共和国',
        'Turks and Caicos Is.': '特克斯和凯科斯群岛',
        'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
      }
      let datt = []
      if (this.act == 0) {
        option7.forEach((item) => {
          datt.push({
            name: item.name,
            value: item.confirm,
          })
        })
        datt.push({
          name: '中国',
          value: this.infor.chinaTotal,
        })
      } else {
        option7.forEach((item) => {
          datt.push({
            name: item.name,
            value: item.nowConfirm,
          })
        })
        datt.push({
          name: '中国',
          value: this.infor.chinaAdd,
        })
      }
      let option0 = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (!params.value) {
              return params.name + ' : ' + '0'
            } else {
              return params.name + ' : ' + params.value
            }
          },
        },

        visualMap: {
          //视觉映射组件
          type: 'piecewise', //分段型。
          splitNumber: 6,
          inverse: true,
          pieces: [
            {
              min: 1,
              max: 499,
              color: '#fff7ba',
            },
            {
              min: 500,
              max: 4999,
              color: '#ffc24b',
            },
            {
              min: 5000,
              max: 9999,
              color: '#ff7c20',
            },
            {
              min: 10000,
              max: 99999,
              color: '#fe5e3b',
            },
            {
              min: 100000,
              max: 499999,
              color: '#e2482b',
            },
            {
              min: 500000,
              color: '#b93e26',
            },
            {
              value: 0,
              label: '0',
              color: '#eeeeee',
            },
          ],
          left: 'left',
          top: 'bottom',
          textStyle: {
            color: '#fff',
          },
        },

        series: [
          {
            type: 'map',
            mapType: 'world',
            roam: false,
            itemStyle: {
              emphasis: { label: { show: false } },
            },
            data: datt,
            nameMap: nameMap,
          },
        ],
      }
      return option0
    },
    but() {
      if (this.act == 0) {
        this.act = 1
        const map1 = this.maps(this.oppp)
        let map2 = document.querySelector('.map')
        this.addChart(map2, map1)
      } else {
        this.act = 0
        const map1 = this.maps(this.oppp)
        let map2 = document.querySelector('.map')
        this.addChart(map2, map1)
      }
      this.guonei()
    },
    guonei() {
      var thit = this
      $.ajax({
        url: '/api?name=disease_h5',
        type: 'get',
        dataType: 'json',
      })
        .done(function (data) {
          let list
          list = JSON.parse(data.data)
          let arr = {
            chinaTotal: list.chinaTotal.confirm,
            chinaAdd: list.chinaAdd.confirm,
          }
          thit.infor = arr
        })
        .fail(function () {
          alert('服务器超时，请重试！')
        })

      //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
      //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
      // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
      // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
      // 数据是保存在 异步对象的 属性中
      // let foreinData
      // foreinData = JSON.parse(ajaxObj.responseText)
      // let list = JSON.parse(foreinData.data)
    },
  },
  computed: {},
}
</script>

<style scoped lang="scss">
.active {
  color: #ffe14d;
}
.activ {
  color: #fff;
}

.box {
  width: 100%;
  height: 1080px;
  background: url('../assets/img/bg.a6333996.jpg') no-repeat;
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  header {
    width: 100%;
    height: 110px;
    color: #fff;
    background: url('../assets/img/head_bg.eeff3da5.png') top center;
    background-size: 100% 100%;
    h1 {
      font-size: 40px;
      text-align: center;
      line-height: 100px;
      font-weight: 900;
    }
    span {
      font-size: 14px;
      position: absolute;
      top: 24px;
      right: 50px;
    }
  }
}
nav {
  width: 100%;
  padding: 0px 10px;
  box-sizing: border-box;
  display: flex;
  .right,
  .left {
    width: 510px;
  }
  .zhon {
    flex: 1;
    padding: 0px 10px;
    box-sizing: border-box;
    position: relative;
    .header {
      width: 100%;
      height: 154px;
      background: #0a1b65;
      padding: 20px;
      box-sizing: border-box;

      ul {
        list-style: none;
        border: 1px solid rgba(25, 186, 139, 0.17);
        width: 100%;
        display: flex;
        height: 82px;
        justify-content: space-around;
        align-items: center;

        li {
          flex: 1;
          text-align: center;
          line-height: 40px;
          height: 40px;
          color: #ffe476;
          font-family: slideyouran;
          font-size: 40px;
          border-right: 1px solid #fff;
        }
        li:nth-child(4) {
          border: none;
        }
      }
      ol {
        width: 100%;
        height: 50px;
        display: flex;
        list-style: none;
        color: #fff;
        justify-content: space-around;
        li {
          flex: 1;
          text-align: center;
          line-height: 50px;
          height: 50px;
          color: #fff;
        }
      }
    }
    .foot {
      position: absolute;
      left: 10px;
      top: 214px;
      width: 843px;
      height: 720px;
      // background: aqua;
      color: #fff;
      .buy {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        button {
          cursor: pointer;
          width: 200px;
          height: 60px;
          border-radius: 50px;
          border: none;
          background: rgba(25, 186, 139, 0.17);
        }
      }
    }
  }
}
.img1 {
  width: 520px;
  height: 520px;
  position: absolute;
  left: 687px;
  top: 402px;
  background-size: 100% 100%;
}
@font-face {
  font-family: slideyouran;
  src: url('../assets/DS-DIGIT.223f2246.TTF');
}
.img2 {
  width: 740px;
  height: 740px;
  animation: changDeg 0.00009s linear infinite;
  position: absolute;
  left: 574px;
  top: 300px;
}
.img3 {
  width: 560px;
  height: 560px;
  animation: chan 0.00009s linear infinite;
  position: absolute;
  left: 669px;
  top: 380px;
  border-radius: 50%;
}
@keyframes changDeg {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
@keyframes chan {
  0% {
    transform: rotate(-0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>
